<template>
  <div class="player-detail" :style="bgStyle" v-show="playerStore.detailShow">
    <!-- 顶部导航栏 -->
    <div class="nav-header">
      <div class="back-button" @click="hidePlayerDetail">
        <img src="@/assets/icon/返回.png" alt="">
      </div>
      <div class="song-info">
        <div class="song-name">{{ songData.songname || '暂无播放' }}</div>
        <div class="song-artist">{{ songData.singer?.[0]?.name || '未知歌手' }}</div>
      </div>
      <div class="right-actions">
        <img src="@/assets/icon/分享.png" alt="">
      </div>
    </div>
    
    <!-- 唱片旋转区域 -->
    <div class="disc-container">
      <div class="disc-light"></div>
      <div class="disc" :class="{ 'disc-playing': isPlaying }">
        <div class="disc-inner">
          <img :src="songData.cover || '@/assets/icon/专辑默认.png'" alt="封面" class="song-cover">
        </div>
      </div>
    </div>
    
    <!-- 歌词区域 -->
    <div class="lyrics-container" @click="toggleLyricsFullscreen">
      <div v-if="lyrics.length > 0" class="lyrics-wrapper" @click.stop>
        <div 
          v-for="(line, index) in lyrics" 
          :key="index" 
          class="lyric-line"
          :class="{ 'active': currentLyricIndex === index }"
          :ref="el => { if (currentLyricIndex === index) activeLyricRef = el }"
        >
          {{ line.text }}
        </div>
      </div>
      <div v-else class="no-lyrics">
        暂无歌词
      </div>
    </div>
    
    <!-- 进度条 -->
    <div class="progress-bar">
      <span class="current-time">{{ formatTime(currentTime) }}</span>
      <div class="progress-wrapper" @click="seekToPosition" @mousedown="startDrag" @touchstart="startDrag">
        <div class="progress-bg"></div>
        <div class="progress-current" :style="{ width: progressPercentage + '%' }"></div>
        <div class="progress-dot" :style="{ left: progressPercentage + '%' }"></div>
      </div>
      <span class="total-time">{{ formatTime(duration) }}</span>
    </div>
    
    <!-- 控制按钮 -->
    <div class="control-buttons">
      <div class="control-button mode">
        <img src="@/assets/icon/循环list.png" alt="播放模式">
      </div>
      <div class="control-button prev" @click.stop="playPrev">
      <img src="@/assets/icon/上一首.png" alt="上一首">
    </div>
    <div class="control-button play-pause" @click.stop="togglePlay">
      <img v-if="isPlaying" src="@/assets/icon/暂停list.png" alt="暂停">
      <img v-else src="@/assets/icon/播放list.png" alt="播放">
    </div>
    <div class="control-button next" @click.stop="playNext">
      <img src="@/assets/icon/下一首.png" alt="下一首">
    </div>
      <div class="control-button playlist">
        <img src="@/assets/icon/列表10.png" alt="播放列表">
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, reactive, onBeforeMount } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { usePlayerStore } from '@/store';
import { musicApi } from '@/api/music';
import defaultCover from '@/assets/icon/专辑默认.png'; // 导入默认封面图片

const router = useRouter();
const route = useRoute();
const playerStore = usePlayerStore();
const lyrics = ref([]);
const currentLyricIndex = ref(0);
const activeLyricRef = ref(null);
const isLyricsFullscreen = ref(false);
const bgStyle = reactive({
  backgroundColor: '#333'
});

// 歌曲信息直接依赖 store
const songData = computed(() => playerStore.currentSong || {
  songmid: '',
  songname: '暂无播放',
  singer: [{ name: '未知歌手' }],
  cover: '@/assets/icon/专辑默认.png',
  url: '',
  album: {}
})

// 播放状态、时间、时长全部依赖 store
const isPlaying = computed(() => playerStore.isPlaying)
const currentTime = computed({
  get: () => playerStore.currentTime,
  set: val => playerStore.currentTime = val
})
const duration = computed(() => playerStore.duration)

// 进度百分比
const progressPercentage = computed(() => {
  if (!duration.value) return 0
  return (currentTime.value / duration.value) * 100
})

// 格式化时间
const formatTime = (seconds) => {
  if (!seconds) return '00:00'
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

// 返回上一页
const hidePlayerDetail = () => {
  playerStore.setDetailShow(false)
}

// 切换播放状态，直接调用 store 方法
/**
 * 切换播放状态，直接调用 store 方法
 * @param {Event} event - 点击事件对象
 */
const togglePlay = (event) => {
  // 阻止事件冒泡和默认行为
  if (event) {
    event.stopPropagation();
    event.preventDefault();
  }
  console.log('【调试】点击了播放/暂停按钮', Date.now());
  playerStore.togglePlay();
  console.log('togglePlay 调用 store.togglePlay');
}

/**
 * 播放上一首歌曲
 * @param {Event} event - 点击事件对象
 */
const playPrev = async (event) => {
  // 阻止事件冒泡和默认行为
  if (event) {
    event.stopPropagation();
    event.preventDefault();
  }
  console.log('【调试】点击了上一首按钮', Date.now());
  await playerStore.playPrev();
  console.log('playPrev 调用 store.playPrev');
  fetchLyrics();
  extractColorFromCover();
}

/**
 * 播放下一首歌曲
 * @param {Event} event - 点击事件对象
 */
const playNext = async (event) => {
  // 阻止事件冒泡和默认行为
  if (event) {
    event.stopPropagation();
    event.preventDefault();
  }
  console.log('【调试】点击了下一首按钮', Date.now());
  await playerStore.playNext();
  console.log('playNext 调用 store.playNext');
  fetchLyrics();
  extractColorFromCover();
}

// 进度条拖动相关
const isDragging = ref(false)
const startX = ref(0)
const startPercentage = ref(0)

/**
 * 开始拖动进度条
 */
const startDrag = (event) => {
  isDragging.value = true
  if (event.type === 'mousedown') {
    startX.value = event.clientX
    window.addEventListener('mousemove', onDrag)
    window.addEventListener('mouseup', stopDrag)
  } else if (event.type === 'touchstart') {
    startX.value = event.touches[0].clientX
    window.addEventListener('touchmove', onDrag, { passive: false })
    window.addEventListener('touchend', stopDrag)
  }
  startPercentage.value = progressPercentage.value
  event.preventDefault()
}

/**
 * 拖动进度条中
 */
const onDrag = (event) => {
  if (!isDragging.value) return
  const progressBar = document.querySelector('.progress-wrapper')
  if (!progressBar) return
  const rect = progressBar.getBoundingClientRect()
  let currentX
  if (event.type === 'mousemove') {
    currentX = event.clientX
  } else if (event.type === 'touchmove') {
    currentX = event.touches[0].clientX
    event.preventDefault()
  }
  const deltaX = currentX - startX.value
  const deltaPercentage = (deltaX / rect.width) * 100
  let newPercentage = startPercentage.value + deltaPercentage
  newPercentage = Math.max(0, Math.min(100, newPercentage))
  if (duration.value) {
    currentTime.value = (newPercentage / 100) * duration.value
    // 拖动时同步 audio 元素
    const audioElement = document.querySelector('audio')
    if (audioElement) {
      audioElement.currentTime = currentTime.value
    }
  }
}

/**
 * 结束拖动进度条
 */
const stopDrag = () => {
  if (!isDragging.value) return
  if (duration.value) {
    // 拖动结束后同步到 store
    playerStore.currentTime = currentTime.value
    // 同步到 audio 元素
    const audioElement = document.querySelector('audio')
    if (audioElement) {
      audioElement.currentTime = currentTime.value
    }
  }
  window.removeEventListener('mousemove', onDrag)
  window.removeEventListener('mouseup', stopDrag)
  window.removeEventListener('touchmove', onDrag)
  window.removeEventListener('touchend', stopDrag)
  isDragging.value = false
}

/**
 * 点击进度条跳转到指定位置
 * @param {MouseEvent|TouchEvent} event
 */
const seekToPosition = (event) => {
  // 拖动时不响应点击跳转，防止冲突
  if (isDragging.value) return;
  const progressBar = event.currentTarget;
  const rect = progressBar.getBoundingClientRect();
  let x = 0;
  if (event.type === 'click') {
    x = event.clientX;
  } else if (event.type === 'touchstart') {
    x = event.touches[0].clientX;
  }
  let percentage = ((x - rect.left) / rect.width) * 100;
  percentage = Math.max(0, Math.min(100, percentage));
  if (duration.value) {
    playerStore.currentTime = (percentage / 100) * duration.value;
    // 同步 audio 元素
    const audioElement = document.querySelector('audio');
    if (audioElement) {
      audioElement.currentTime = playerStore.currentTime;
    }
  }
};

// 监听 store 的 currentTime，更新歌词高亮
watch(() => playerStore.currentTime, (newTime) => {
  if (!isDragging.value) {
    updateCurrentLyricIndex()
  }
})

// 监听 store 的 currentSong，切歌时重新拉歌词和封面
watch(() => playerStore.currentSong, (newSong, oldSong) => {
  if (newSong && newSong.songmid !== (oldSong && oldSong.songmid)) {
    fetchLyrics()
    extractColorFromCover()
  }
})

// 获取歌词
const fetchLyrics = async () => {
  if (!songData.value?.songmid) return;
  
  try {
    const response = await musicApi.getLyric(songData.value.songmid);
    console.log('获取到的歌词数据:', response);
    
    if (response && response.data) {
      // 检查歌词数据结构
      let lyricText = '';
      if (typeof response.data === 'string') {
        lyricText = response.data;
      } else if (response.data.lyric) {
        lyricText = response.data.lyric;
      } else if (response.data.data && response.data.data.lyric) {
        lyricText = response.data.data.lyric;
      }
      
      // 解析歌词
      parseLyrics(lyricText);
    } else {
      console.warn('歌词数据格式不正确:', response);
      lyrics.value = [];
    }
  } catch (error) {
    console.error('获取歌词失败:', error);
    lyrics.value = [];
  }
};

// 解析歌词
const parseLyrics = (lyricText) => {
  if (!lyricText) {
    lyrics.value = [];
    return;
  }
  
  const lines = lyricText.split('\n');
  const parsedLyrics = [];
  
  // 匹配时间标签 [mm:ss.xx]
  const timeRegex = /\[(\d{2}):(\d{2})\.(\d{2,3})\]/g;
  
  lines.forEach(line => {
    // 跳过空行和只包含元数据的行
    if (!line.trim() || line.startsWith('[ti:') || 
        line.startsWith('[ar:') || line.startsWith('[al:') || 
        line.startsWith('[by:') || line.startsWith('[offset:')) {
      return;
    }
    
    // 提取所有时间标签
    const timeMatches = [...line.matchAll(timeRegex)];
    if (timeMatches.length === 0) return;
    
    // 提取歌词文本（去除所有时间标签）
    let text = line.replace(timeRegex, '').trim();
    
    // 对每个时间标签创建一个歌词条目
    timeMatches.forEach(match => {
      const minutes = parseInt(match[1]);
      const seconds = parseInt(match[2]);
      const milliseconds = parseInt(match[3]);
      
      const time = minutes * 60 + seconds + milliseconds / (match[3].length === 2 ? 100 : 1000);
      
      if (text) {
        parsedLyrics.push({ time, text });
      }
    });
  });
  
  // 按时间排序
  lyrics.value = parsedLyrics.sort((a, b) => a.time - b.time);
  // console.log('解析后的歌词:', lyrics.value);
};

// 更新当前歌词索引
const updateCurrentLyricIndex = () => {
  if (lyrics.value.length === 0) return;
  
  const currentTime = playerStore.currentTime;
  let index = lyrics.value.findIndex(lyric => lyric.time > currentTime);
  
  if (index === -1) {
    // 如果所有歌词时间都小于当前时间，选择最后一行
    index = lyrics.value.length;
  }
  
  // 当前行是上一个时间点的歌词
  currentLyricIndex.value = index > 0 ? index - 1 : 0;
  
  // 滚动到当前歌词
  scrollToActiveLyric();
};

// 滚动到当前歌词
const scrollToActiveLyric = () => {
  if (activeLyricRef.value) {
    activeLyricRef.value.scrollIntoView({
      behavior: 'smooth',
      block: 'center'
    });
  }
};

// 提取封面颜色作为背景
const extractColorFromCover = () => {
  if (!songData.value?.cover) return;
  
  // 修改图片URL，使用本地代理
  let imgUrl = songData.value.cover;
  if (imgUrl.includes('y.qq.com/music/photo_new')) {
    imgUrl = imgUrl.replace('https://y.qq.com', '/music-photo');
  }
  
  const img = new Image();
  img.crossOrigin = 'Anonymous';
  img.src = imgUrl;
  
  img.onload = () => {
    try {
      // 创建 canvas 提取颜色
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);
      
      // 获取图片中心点的颜色
      const centerX = Math.floor(img.width / 2);
      const centerY = Math.floor(img.height / 2);
      const imageData = ctx.getImageData(centerX, centerY, 1, 1).data;
      
      // 提取 RGB 值
      const r = imageData[0];
      const g = imageData[1];
      const b = imageData[2];
      
      // 创建渐变背景
      const primaryColor = `rgb(${r}, ${g}, ${b})`;
      const secondaryColor = `rgb(${Math.max(r-40, 0)}, ${Math.max(g-40, 0)}, ${Math.max(b-40, 0)})`;
      
      // 设置渐变背景
      bgStyle.background = `linear-gradient(to bottom, ${primaryColor}, ${secondaryColor})`;
      
      console.log('提取的封面颜色:', primaryColor, secondaryColor);
    } catch (error) {
      console.error('提取封面颜色失败:', error);
      // 使用默认渐变
      bgStyle.background = 'linear-gradient(to bottom, #8e54e9, #4776e6)';
    }
  };
  
  img.onerror = () => {
    console.error('封面图片加载失败:', imgUrl);
    // 使用默认渐变
    bgStyle.background = 'linear-gradient(to bottom, #8e54e9, #4776e6)';
  };
};

// 监听当前时间变化，更新歌词
// 监听 store 中的时间变化，同步到本地状态
watch(() => playerStore.currentTime, (newTime) => {
  // 只有在不拖动时才更新时间，避免拖动时时间跳动
  if (!isDragging.value) {
    currentTime.value = newTime;
    updateCurrentLyricIndex();
  }
});

// 监听 store 中的播放状态变化，同步到本地状态
watch(() => playerStore.isPlaying, (newIsPlaying) => {
  isPlaying.value = newIsPlaying;
});

// 监听 store 中的歌曲变化，同步到本地状态
watch(() => playerStore.currentSong, (newSong) => {
  if (newSong && newSong.songmid && newSong.songmid !== songData.value.songmid) {
    songData.value = { ...newSong };
    fetchLyrics();
    extractColorFromCover();
  }
});

// 监听本地播放状态变化，同步到 store
watch(() => isPlaying.value, (newIsPlaying) => {
  playerStore.isPlaying = newIsPlaying;
});

// 监听当前歌曲变化，获取新歌词
watch(() => playerStore.currentSong?.songmid, (newSongMid, oldSongMid) => {
  // 只有当歌曲ID变化时才重新获取歌词和提取封面颜色
  if (newSongMid && newSongMid !== oldSongMid) {
    fetchLyrics();
    extractColorFromCover();
  }
}, { immediate: true });

// 添加歌手详情获取方法
const fetchSingerDetail = async () => {
  if (!playerStore.currentSong?.singer?.[0]?.mid) return;
  
  try {
    const singermid = playerStore.currentSong.singer[0].mid;
    const response = await musicApi.getSingerDetail(singermid);
    
    console.log('获取到的歌手详情:', response);
    
    if (response && response.data && response.data.data) {
    }
  } catch (error) {
    console.error('获取歌手详情失败:', error);
  }
};

// 在获取歌词后调用获取歌手详情
onMounted(() => {
  // 获取歌词
  fetchLyrics();
  // 获取歌手详情
  fetchSingerDetail();
});
</script>

<style lang="scss" scoped>
.player-detail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, #8e54e9, #4776e6); // 默认渐变背景
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: all 0.3s ease;
  overflow: hidden;
  
  // 添加下半部分渐变浅色背景
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%; // 控制渐变覆盖的高度
    background: linear-gradient(to top, rgba(255, 255, 255, 0.5), transparent); // 渐变浅色
    z-index: -1; // 修改为负值，确保不会遮挡控制按钮
    pointer-events: none; // 确保点击事件可以穿透此元素
  }
  
  /* 添加进入和离开动画 */
  &.v-enter-active,
  &.v-leave-active {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  &.v-enter-from,
  &.v-leave-to {
    transform: translateY(100%);
    opacity: 0;
  }
  
  &.v-enter-to,
  &.v-leave-from {
    transform: translateY(0);
    opacity: 1;
  }
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // background: rgba(0, 0, 0, 0.3); // 半透明遮罩，增加文字可读性
    z-index: -1;
  }
}

.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 15px;
  backdrop-filter: blur(5px);
  
  .back-button {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    
    img {
      width: 20px;
      height: 20px;
      filter: brightness(1.2);
    }
  }
  
  .song-info {
    text-align: center;
    flex: 1;
    
    .song-name {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 6px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    
    .song-artist {
      font-size: 14px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
  }
  
  .right-actions {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    img {
      width: 20px;
      height: 20px;
      filter: brightness(1.2);
    }
    
    &:active {
      background: rgba(255, 255, 255, 0.3);
    }
  }
}

.disc-container {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
  position: relative;
  
  .disc-light {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(243, 233, 233, 0) 70%);
    z-index: 0;
    animation: pulse 3s ease-in-out infinite alternate;
  }
  
  .disc {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: linear-gradient(45deg, #222, #444);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 
                inset 0 0 10px rgba(255, 255, 255, 0.2),
                inset 0 0 20px rgba(0, 0, 0, 0.5);
    animation: rotate 20s linear infinite;
    animation-play-state: paused;
    position: relative;
    z-index: 1;
    
    &.disc-playing {
      animation-play-state: running;
    }
    
    .disc-inner {
      width: 220px; /* 增大内部图片区域 */
      height: 220px;
      border-radius: 50%;
      overflow: hidden;
      border: 6px solid rgba(0, 0, 0, 0.3);
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
      
      .song-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
        
        &:hover {
          transform: scale(1.05);
        }
      }
    }
  }
}

.lyrics-container {
  flex: 1;
  overflow: hidden;
  padding: 0 20px;
  margin: 10px 0;
  position: relative;
  backdrop-filter: blur(10px);
  border-radius: 16px;
  margin: 0 15px 20px;
  
  &::before, &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1;
    pointer-events: none;
  }
  .lyrics-wrapper {
    height: 100%;
    overflow-y: auto;
    padding: 60px 0;
    
    &::-webkit-scrollbar-track {
      border-radius: 2px;
    }
    
    &::-webkit-scrollbar-thumb {
      border-radius: 2px;
    }
    
    .lyric-line {
      text-align: center;
      padding: 12px 0;
      transition: all 0.4s;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      
      &.active {
        background: linear-gradient(to right, #acdad7, #a26bd8); // 渐变色背景
        -webkit-background-clip: text; // 使背景仅应用于文字
        -webkit-text-fill-color: transparent; // 文字透明，显示背景
        font-size: 18px;
        font-weight: 600;
        transform: scale(1.05);
        text-shadow: none; // 移除文字阴影，因为渐变色文字不支持
      }
    }
  }
  
  .no-lyrics {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
  }
}

.progress-bar {
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 15px;
  
  .current-time, .total-time {
    font-size: 12px;
    // color: rgba(255, 255, 255, 0.9);
    width: 45px; // 增大宽度确保时间显示完整
    font-weight: 500;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  }
  
  .current-time {
    text-align: left;
  }
  
  .total-time {
    text-align: right;
  }
  
  .progress-wrapper {
    flex: 1;
    height: 30px;
    display: flex;
    align-items: center;
    position: relative;
    margin: 0 8px;
    cursor: pointer;
    touch-action: none; /* 防止触摸设备上的滚动干扰 */
    
    .progress-bg {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      height: 4px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 4px;
    }
    
    .progress-current {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 4px;
      background: linear-gradient(to right, #e491d3, rgb(210, 61, 210));
      border-radius: 4px;
      transition: width 0.1s linear;
    }
    
    .progress-dot {
      position: absolute;
      top: 50%;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    
    &:hover, &:active {
      .progress-bg, .progress-current {
        height: 6px;
      }
      
      .progress-dot {
        opacity: 1;
      }
    }
  }
}

.control-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px 20px;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 10; // 确保控制按钮在最上层
  
  .control-button {
      width: 60px; // 增加点击区域大小
      height: 60px; // 增加点击区域大小
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.2s;
      position: relative; // 确保每个按钮都有自己的堆叠上下文
      cursor: pointer; // 添加指针样式
      
      img {
        width: 30px; // 确保图标大小合适
        height: 30px;
        pointer-events: none; // 确保点击事件不会被图片阻断
      }
      
      &.play-pause {
        width: 70px; // 播放/暂停按钮更大
        height: 70px;
        
        img {
          width: 40px;
          height: 40px;
        }
      }
      
      &:active {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(0.95);
      }
      
      // 添加触摸反馈
      &::after {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        border-radius: 50%;
        z-index: -1;
      }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  from {
    opacity: 0.5;
    transform: scale(0.95);
  }
  to {
    opacity: 0.8;
    transform: scale(1.05);
  }
}
</style>
